<!-- 屏幕尺寸、电池容量、充电功率、 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../imgs/7fa57f35c179bad9cc9f18e2dd9b1d40.ico" />
    <!-- 1. 引入bootstrap.css -->
    <link rel="stylesheet" href="../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <title>个人中心</title>


    <!-- 必须先引入jquery.min.js -->
    <script src="../plugins/jquery.min.js"></script>
    <!-- 引入bootstrap.js -->
    <script src="../plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    <!-- 导入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>

    <style>
        img {
            width: 177px;
            height: 155px;
        }

        #a1 {
            padding: 0px;
        }

        #logo {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Roman-55, Helvetica Neue, Helvetica, Arial, sans-serif;
            font-feature-settings: "salt";
            font-weight: 800;
            list-style: none;
            cursor: pointer;
            fill: currentColor;
            line-height: 1;
            color: #f50514;
            font-size: 20px;
            box-sizing: border-box;
            vertical-align: middle;
        }

        #logo> :first-child+li {
            display: inline-block;
            padding-top: 15px;
        }

        #dhl li:hover {
            border-bottom: #f50514;
            border-style: solid;
            border-left-width: 0px;
            border-right-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 5px;
        }
        #content{
            padding: 60px;
        }
    </style>
</head>

<body>
    <!-- 导航begin -->
    <div>
        <div class="container-fluid" id="D1">
            <!-- 定义一行 -->
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <ul class="nav navbar-nav nav-left" id="logo">
                                <li>
                                    <img src="../imgs/OnePlus_Logo.png" style="width: 50px;height: 50px;" alt="">
                                </li>
                                <li id="onepluse">ONEPLUS</li>
                            </ul>
                        </div>

                        <div class="collapse navbar-collapse" id="example-navbar-collapse">

                            <ul class="nav navbar-nav navbar-right" id="dhl">
                                <!-- <li id="l1"><a href="login.html">登录</a></li> -->
                                <li id="l2"><a href="index.html">首页</a></li>
                                <li id="l3"><a href="shopping cart.html">我的购物车</a></li>
                                <li><a href="story.html" id="Myorder">一加故事</a></li>
                                <li><a href="login.html">安全退出</a></li>
                                <li><a id="a1" href="personal.html"><img src="../imgs/OIP-D.jpg"
                                            style="width: 50px;height: 50px;border-radius: 50%;" alt=""></a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <!-- 导航end -->

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2">

                    <ul class="nav nav-pills  nav-stacked" id='left_bar'>
                        <li role="presentation" class="active"><a href="#">个人资料</a></li>
                        <li role="presentation"><a href="#">数据汇总</a></li>
                        <li role="presentation"><a href="#">数据管理</a></li>
                    </ul>
                </div>
                <div class="col-md-10" id="right">

                    <div id="inner01" class="col-md-4">
                        <table class="table table-hover">
                            <caption></caption>
                            <thead>
                            <tr>
                                <th>个人信息</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>昵称</td>
                                <th></th>
                                <td>爷傲&奈我何</td>
                            </tr>
                            <tr>
                                <td>姓名</td>
                                <th></th>
                                <td>李华</td>
                            </tr>
                            <tr>
                                <td>性别</td>
                                <th></th>
                                <td>保密</td>
                            </tr>
                            <tr>
                                <td>电话</td>
                                <th></th>
                                <td>666666</td>
                            </tr>
                            <tr>
                                <td>邮箱</td>
                                <th>    </th>
                                <td>      666666@163.com</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div id="inner02" hidden>
                        <ul class="nav nav-tabs" id="main_bar">
                            <li role="presentation" class="active"><a href="#">oneplus各年出货量</a></li>
                            <li role="presentation"><a href="#">2021Android手机好评率</a></li>
                            <li role="presentation"><a href="#">与友商参数对比</a></li>
                        </ul>
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col-md-8" id="content">

                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                    <div id="inner03" hidden>
                        <table class="table table-hover">
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <script>

            $(function () {
                // 点击左侧导航，右面内容发生变化
                $('#left_bar li').click(function () {
                    $(this).addClass('active').siblings().removeClass('active');
                    let label = $(this).text();
                    if (label == '个人资料') {
                        $('#inner01').show(100).siblings().hide();
                    } else if (label == '数据汇总') {
                        $('#inner02').show(100).siblings().hide();
                        plot_bar('../result/Shipments.json');
                    } else if (label == '数据管理') {
                        $('#inner03').show(100).siblings().hide();
                    }
                })
                data_manage()


                $('#main_bar li').click(function () {
                    // 点击让该标签处于活动状态
                    $(this).addClass('active').siblings().removeClass('active');

                    // 修改图表显示
                    let label = $(this).text();
                    if (label == 'oneplus各年出货量') {
                         $('#content').css({"padding":"60px"});
                        plot_bar('../result/Shipments.json');
                    } else if (label == '2021Android手机好评率') {
                        $('#content').css({"padding":"20px"});
                        plot_bar_h('../result/Favorable rate.json');
                    } else if (label == '与友商参数对比') {
                        $('#content').css({"padding":"20px"});
                        plot_radar('../result/parameter.json');
                    }
                })



                var myChart;

                function plot_bar(url) {
                    $.get(url, function (data) {
                        // console.log(data['上海-嘉定区']);
                        let area = [];
                        let salary = []
                        for (item in data) {
                            area.push(item);
                            salary.push(data[item])
                        }
                        console.log(area.length, salary.length);
                        if (myChart) {
                            myChart.dispose();
                        }
                        myChart = echarts.init(document.getElementById('content')
                            , null, {
                            width: 700,
                            height: 500
                        }
                        );
                        // 指定图表的配置项和数据
                        let option = {
                            title: {
                                text: 'oneplus各年出货量'
                            },
                            tooltip: {},
                            legend: {
                                data: ['oneplus各年出货量/万']
                            },
                            xAxis: {
                                data: area
                            },
                            yAxis: {
                                name: "单位（万部）"
                            },
                            series: [
                                {
                                    name: '销量',
                                    type: 'bar',
                                    data: salary
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

                    })
                }//end plot_bar

                function plot_bar_h(url) {
                    $.get(url, function (data) {

                        let area = [];
                        let salary = []
                        for (item in data) {
                            area.push(item);
                            salary.push(data[item])
                        }
                        console.log(area.length, salary.length);
                        if (myChart) {
                            myChart.dispose();
                        }
                        myChart = echarts.init(document.getElementById('content')
                            , null, {
                            width: 650,
                            height: 550
                        }
                        );

                        option = {
                            title: {
                                text: '2021Android手机好评率',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            legend: {
                                top: 'bottom'
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'value',
                                boundaryGap: [0, 0.01]
                            },
                            yAxis: {
                                type: 'category',
                                data: area.reverse()
                            },
                            series: [
                                {
                                    name: '好评率/%',
                                    type: 'bar',
                                    data: salary.reverse()
                                }
                            ]
                        };
                        option && myChart.setOption(option);
                    })
                }//end plot_pie

                function plot_radar(url) {
                    $.get(url, function (data) {

                        let area = [];
                        let salary1 = []
                        let salary2 = []
                        let salary3 = []


                        for (item in data) {
                            area.push(item)
                            salary1.push(data[item][0])
                            salary2.push(data[item][1])
                            salary3.push(data[item][2])
                        }

                        console.log(salary2)
                        if (myChart) {
                            myChart.dispose();
                        }
                        myChart = echarts.init(document.getElementById('content')
                            , null, {
                            width: 600,
                            height: 600
                        }
                        );
                        // 指定图表的配置项和数据
                        let option = {
                            title: {
                                text: '与友商参数对比',
                                left: 'center'
                            },
                            legend: {
                                data: ['iphone13', 'oneplus9 Pro', 'SAMSUNG Galaxy S21'],
                                top: 'bottom'
                            },
                            radar: {
                                // shape: 'circle',
                                splitNumber: 4,
                                axisLabel: {
                                    show: true,
                                    interval:10,
                                    fontSize: 12,
                                    color: '#838D9E',
                                    showMaxLabel: true, //不显示最大值，即外圈不显示数字30
                                    showMinLabel: false, //显示最小数字，即中心点显示0
                                },
                                indicator: [
                                    { name: '电池容量/mAh', max: 5000 },//,axisLabel: {show: true}
                                    { name: '屏幕尺寸/inch', max: 6.9 },
                                    { name: '屏幕刷新率/Hz', max: 140 },
                                    { name: '后置主摄像素/w', max: 4800 },
                                    { name: '前置摄像头像素/w', max: 1650 },
                                    { name: '充电功率/W', max: 70 }
                                ]
                            },
                            series: [
                                {
                                    name: 'Budget vs spending',
                                    type: 'radar',
                                    data: [
                                        {
                                            value: salary1,
                                            name: 'iphone13'
                                        },
                                        {
                                            value: salary2,
                                            name: 'oneplus9 Pro'
                                        },
                                        {
                                            value: salary3,
                                            name: 'SAMSUNG Galaxy S21'
                                        },
                                    ]
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

                    })
                }
                function data_manage() {
                    let table = $('#inner03>table>tbody')
                    $.get('../data/product.json', function (data) {
                        for (item of data) {
                            table.append(`
                            <tr>
                                <td>${item['id']}</td>
                                <td>${item['name']}</td>
                                <td>${item['price']}</td>
                                <td>${item['desc']}</td>
                                <td>${item['remark']}</td>
                            </tr>
                            
                            `)
                        }
                    })
                }


            })
        </script>
</body>

</html>